﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>服务</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<link href="./css/sm.css" rel="stylesheet" >
	<link rel="stylesheet" href="./css/toastr.min.css" type="text/css">
	<style type="text/css">
      #menu-icon {
      	float: left;
      }
      .icon {
      	color:#fff;
      }
      .row .col-50 {
      	width: 50%;
      	margin-left: 0px;
      }

      .grid-img {
      	background: #fff;
      	margin: 0px;
      	padding-top: 20px;
      	padding-bottom: 20px;
      	text-align: center;
      }

      .content-block-title {
      	line-height: 1.2;
      	margin-top: 1.5rem;
      }
      #group_name {
      	position: fixed;
      	bottom: 10px;
      	text-align: center;
      }
      #author {
      	float: right;
      }
      .popup-complaint {
      	background: #E6E6E6;
      }

      #button a{
		width: 50%;
		text-align: center;
      }
      #button {
      	text-align: center;
      }
    </style>
    
	<script type='text/javascript' src='./js/jquery-2.2.0.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='./js/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='./js/sm.min.js' charset='utf-8'></script>
	<script type="text/javascript" src="./js/jquery.touchSwipe.min.js"></script>
	<script type="text/javascript" src="./js/toastr.min.js"></script>
	<script type="text/javascript" src="./js/main.js"></script>
	
	
</head>
<body>

	<div class="page-group">
		<!-- 你的html代码 -->	
		<div class="page">
			<header class="bar bar-nav">
				<a id="menu-icon" class="icon icon-left"></a>
				<h1 class="title">服务</h1>
			</header>
			<div class="content">
				<div class="content-block-title">园区要闻</div>
				<div class="list-block">
					<ul id="news_list"></ul>
				</div>
				<div class="content-block-title">更多服务</div>

				<div class="row">
					<div class="col-50 grid-img" id="complaint">
						<img src="img/complaint.png"></div>
					<div class="col-50 grid-img" id="about">
						<img src="img/about.png"></div>
				</div>
			</div>
			<div class="popup popup-news">
				<div class="content-block ">
					<div class="content-padded" id="news_content">
						<header class="bar bar-nav">
							<h1 class="title">新闻</h1>
						</header>
						<h2 id="news_title">title</h2>

						<h4 id="news_date">date</h4>
						<p id="content">
							成都武侯祠肇始于公元223年修建刘备惠陵时，它是中国唯一一座君臣合祀祠庙和最负盛名的诸葛亮、刘备及蜀汉英雄纪念地，也是全世界影响最大的三国遗迹博物馆。1961年国务院公布为第一批全国重点文物保护单位，1984年成立成都武侯祠博物馆，2008年被评为国家一级博物馆，享有“三国圣地”之美誉。
						</p>
						<h4 id="news_author">author</h4>
					</div>
				</div>
			</div>
			<div class="popup popup-complaint">
				<div class="content">
					<header class="bar bar-nav">
						<h1 class="title">投诉</h1>
					</header>
					<br />	
					<div class="content-block-title">请输入投诉信息</div>
					<div class="list-block">
						<ul>
							<!-- Text inputs -->	
							<li>
								<div class="item-content">
									<div class="item-media"> <i class="icon icon-form-name"></i>
									</div>
									<div class="item-inner">
										<div class="item-title label">姓名</div>
										<div class="item-input">
											<input id="comlaint_name" type="text" placeholder="NAME" name="name"></div>
									</div>
								</div>
							</li>
							<li>
								<div class="item-content">
									<div class="item-media"> <i class="icon icon-form-name"></i>
									</div>
									<div class="item-inner">
										<div class="item-title label">电话</div>
										<div class="item-input">
											<input id="comlaint_phone" type="text" placeholder="PHONE" name="phone"></div>
									</div>
								</div>
							</li>
							<li>
								<div class="item-content">
									<div class="item-media">
										<i class="icon icon-form-email"></i>
									</div>
									<div class="item-inner">
										<div class="item-title label">邮箱</div>
										<div class="item-input">
											<input id="comlaint_mail" type="email" placeholder="E-mail" name="mail"></div>
									</div>
								</div>
							</li>

							<li class="align-top">
								<div class="item-content">
									<div class="item-media">
										<i class="icon icon-form-comment"></i>
									</div>
									<div class="item-inner">
										<div class="item-title label">投诉内容</div>
										<div class="item-input">
											<textarea id="comlaint_message" name="message"></textarea>
										</div>
									</div>
								</div>
							</li>
						</ul>

					</div>

					<div class="content-block" id="complaint-submit">
						<p>
							<a class="button button-big button-round">提交</a>
						</p>
					</div>
				</div>
				
			</div>
			<div class="popup popup-about">
				<div class="content-block">
					<div class="content-padded">
						<header class="bar bar-nav">
							<h1 class="title">关于</h1>
						</header>
						<br />
						<h3>武侯祠-全国影响最大的三国遗迹博物馆</h3>
						<p>
							成都武侯祠肇始于公元223年修建刘备惠陵时，它是中国唯一一座君臣合祀祠庙和最负盛名的诸葛亮、刘备及蜀汉英雄纪念地，也是全世界影响最大的三国遗迹博物馆。1961年国务院公布为第一批全国重点文物保护单位，1984年成立成都武侯祠博物馆，2008年被评为国家一级博物馆，享有“三国圣地”之美誉。
						</p>

						<p id="group_name">DESIGNED BY FIRST GROUP ^_^</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script>
	var base_url = "../../";
	var uuid = getUUID();
	$(document).ready(function(){
		getNewsList();
		$("#menu-icon").click(function() {
			window.location.href = "./index.html";
		});
		$("#about").click(function() {
			directToAbout();
		});
		$("#complaint").click(function() {
			directToComplaint();
		})
		$("#complaint-submit").click(function(){
			var name = $("#comlaint_name").val();
			var phone = $("#comlaint_phone").val();
			var mail = $("#comlaint_mail").val();
			var message = $("#comlaint_message").val();
			//alert(name+","+phone + "," + mail + "," + message);
			sendComplaint(name,phone,mail,message);
		})
	});
	Zepto.init();

	$(function() {
  			$(".popup").swipe( {
    			//上滑，下滑
    			swipeDown:function(event, direction, distance, duration, fingerCount, fingerData) { 
					Zepto.closeModal()
    			}
  			});
		});

	function getNewsList() {
		var sendData = new Object();
		sendData.device_id = uuid;
		sendData.start = 0;
		sendData.num = 4;
		var settings = ajax_package(base_url+"info/get_news_list",
			sendData,
			function(data,textStatus) {
				if (textStatus != "success") {
					return;
				}
				var list = $("#news_list");
				var contentStr = "";
				for (var i = 0; i < data.length; i++) {
					contentStr += '<li class="item-content" id="'+data[i].id+'" onclick="directToNewsDetail('+data[i].id+')" ">';
					contentStr += '<div class="item-media">';
					contentStr += '<i class="icon icon-f7"></i>';
					contentStr += '</div>';
					contentStr += '<div class="item-inner">';
					contentStr += '<div class="item-title">'+data[i].title+'</div>';
                    var timestamp = data[i].date;
                    var date = new Date();
                    date.setTime(timestamp * 1000);

					contentStr += '<div class="item-after">'+date.toLocaleDateString()+'</div>';
					contentStr += '</div>';
					contentStr += '</li>';
				}
				list.html(contentStr);
			});
		$.ajax(settings);
	}
	function getNewsDetail(id) {
		var sendData = new Object();
		sendData.device_id = uuid;
		sendData.id = id;
		var settings = ajax_package(base_url+"info/get_news",
			sendData,
			function(data,textStatus) {
				if (textStatus != "success") {
					return;
				}
				console.log("data:"+JSON.stringify(data));
				var contentStr = "";
				contentStr += '<header class="bar bar-nav">';
				contentStr += '<h1 class="title">新闻</h1>';
				contentStr += '</header>';
				contentStr += '<br />';
				contentStr += '<h2 id="news_title">'+data.title+'</h2>';
				contentStr += '<h4>'+data.date+'</h4>';
				contentStr += '<p id="content">'+data.content+'</p>';
				contentStr += '<h4 id="author">'+data.author+'</h4>';
				$("#news_content").html(contentStr);
			});
		$.ajax(settings);
	}
	function sendComplaint(name,phone,mail,message) {
		var sendData = new Object();
		sendData.device_id = uuid;
		sendData.name = name;
		sendData.phone = phone;
		sendData.mail = mail;
		sendData.message = message;
		var settings = ajax_package(base_url + "feedback/post_complaints",
			sendData,
			function(data,textStatus) {
				if (textStatus != "success") {
					return;
				}
				console.log("data:"+JSON.stringify(data));
				if (data.status == 100) {
					toastr.success("发送成功","感谢您的建议或意见。");
				}else if (data.status == 103) {
					toastr.error("发送失败","您是否有些地方没有填写呢？");
				}else  {
					toastr.error("发送失败","未知错误。");
				}
				
			});
		$.ajax(settings);
	}
	function directToNewsDetail(news_id) {
		//alert("went to another");
		Zepto.popup(".popup-news");
		getNewsDetail(news_id);
	}
	function directToComplaint() {
		Zepto.popup(".popup-complaint");
		//window.location.href = "./complaint.html";
	}
	function directToAbout() {
		Zepto.popup(".popup-about");
		//window.location.href = "./about.html";
	}

	</script>
</body>
</html>